<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>

    <script type="text/javascript" src="${ctx}/libjs/plugins/bootstrap/js/bootstrap-select.js"></script>
    <link rel="stylesheet" type="text/css" href="${ctx}/libjs/plugins/bootstrap/css/bootstrap-select.css">
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <%--<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>--%>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${ctx}/appjs/market/marketActivity.js"></script>

</head>



<script type="text/javascript">
    var  contenthtml='';

    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>活动列表</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>活动详情</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="columns pull-left">
                        <h5 class="font-bold">活动详情</h5>
                    </div>
                    <div class="ibox-tools">
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <%-- <input class="form-control" type="hidden" id="ticketInfoId" value="${ticketInfos}">--%>
                    <span th:text="${ticketInfos}" style="display: none" id="ticketInfos"></span>
                    <form class="form-horizontal m-t " id="frmMarketActivity">
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动名称</label>
                            <div class="col-sm-3">
                                <input class="form-control" name="activityName" id="activityName" value="${marketActivity.activityName}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动类型</label>
                            <div class="col-sm-3">
                                <select class="form-control" name="activityType" id="activityTypeId" onchange="changeType(this.value)" >
                                    <option value="1" <c:if test="${marketActivity.activityType eq '1'}">selected="selected"</c:if>>充值活动</option>
                                    <option value="3" <c:if test="${marketActivity.activityType eq '3'}">selected="selected"</c:if>>满减活动</option>
                                    <option value="4" <c:if test="${marketActivity.activityType eq '4'}">selected="selected"</c:if>>满返活动</option>
                                    <option value="5" <c:if test="${marketActivity.activityType eq '5'}">selected="selected"</c:if>>拉新活动</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动范围：</label>
                            <div class="col-sm-1">
                                <input type="radio" <c:if test="${marketActivity.activityScope eq '0'}"> checked="checked"</c:if>  name="activityScope" value="0" onchange="scopeChange1(this.value)" checked>全部
                            </div>
                            <div class="col-sm-1">
                                <input type="radio"  <c:if test="${marketActivity.activityScope eq '1'}">checked="checked"</c:if> name="activityScope" value="1" onchange="scopeChange1(this.value)">部分
                            </div>
                        </div>

                        <%--<div class="form-group  layui-form row">
                            <label class="col-sm-3 col-form-label text-right">活动范围：</label>
                            <div class="col-sm-1">
                                <input type="radio" class="form-control" name="activityScope"  onchange="scopeChange1(this.value)" value="0" title="全部" checked >
                            </div>
                            <div class="col-sm-1">
                                <input type="radio" class="form-control" name="activityScope"  onchange="scopeChange1(this.value)" value="1" title="部分" >
                            </div>
                        </div>--%>
                        <div class="form-group row istam" id="stationBoxId" style="display:none;" >
                            <label class="col-sm-3 col-form-label text-right">部分充电站：</label>
                            <select id="stationIds" name="stationIds" class="selectpicker bla bla bli" multiple data-live-search="true" title="请选择充电站">
                                <c:forEach items="${stationInfos}" var="bean">
                                    <%--                                   ${marketActivity.stationIds eq bin.elecStationId} ${fn:contains(elecStation.labelIds,labelInfo.labelId )}--%>
                                    <option value="${bean.elecStationId}"  <c:if test="${fn:contains(marketActivity.stationIds,bean.elecStationId)}">selected</c:if>>${bean.stationName}
                                    </option>
                                </c:forEach>
                            </select>
                        </div>
                        <%--<div class="form-group row layui-form hide islsit">
                            <label class="col-sm-3 col-form-label text-right">选择充电站</label>
                            <div class="col-sm-4">
                                     <div class="seach-box self_seach">
                                    <ul></ul>
                                </div>
                            </div>
                        </div>--%>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">已选择用户</label>
                            <div class="col-sm-3">
                                <input class="form-control" name="participateUser" id="userIds" value="${marketActivity.participateUser}" readonly>
                            </div>
                        </div>

                        <%-- 充值活动条件框--%>
                        <div class="form-group row" id="chargeId">
                            <div  class="col-sm-3 col-form-label text-right">
                                <label>充值活动</label>
                                <%-- <input type="button" onclick="addMarketActivity.addCharge()" value="[+]" />--%>
                            </div>
                            <div id="chargeInputs" >
                                <c:forEach items="${marketActivityRecords}" var="record">
                                    <c:if test="${record.rewardType == 0}">
                                        <span>充值金额满<input type="text" name="chargeAmount_cz_0" value="${record.chargeAmount}" >奖励<input type="text" name="awardAmount_cz_0" id="awardAmount_cz_0" value="${record.awardAmount}">(元)</span></inpt>
                                    </c:if>
                                    <div></div>
                                    <c:if test="${record.rewardType == 1}">
                                        <span>充值金额满<input type="text" name="chargeAmount_cz_0" value="${record.chargeAmount}">
                                             奖励<select  name="tickettypeId_cz_0" id="tickettypeId_cz_0" class="form-control" placeholder="选择卡券" lay-search="">
                                               <option value="" selected="selected">请选择</option>
                                               <c:forEach items="${ticketInfos}" var="info">
                                                   <option value="${info.ticketTypeId}" <c:if test="${record.ticketTypeId == info.ticketTypeId}" >selected</c:if>>
                                                           ${info.ticketName}|${info.discountTypeName}|${info.userTypeName}|${info.discountDesc}
                                                   </option>
                                               </c:forEach>
                                           </select>
                                        </span>
                                    </c:if>
                                </c:forEach>
                            </div>
                        </div>
                        <%-- 满减活动条件框--%>
                        <div class="form-group row" id="fullRedutionId" style="display:none;">
                            <div  class="col-sm-3 col-form-label text-right">
                                <label>满减活动</label>
                                <%--   <input type="button" onclick="addMarketActivity.addFullRedution()" value="[+]" />--%>
                            </div>
                            <div id="fullReductionInputs" >
                                <c:forEach items="${marketActivityRecords}" var="record">
                                    <span>订单金额满<input type="text" name="orderAmount_mj_0" id="orderAmount_mj_0" value="${record.orderAmount}">减<input type="text" name="awardAmount_mj_0" id="awardAmount_mj_0" value="${record.awardAmount}">(元)</span></inpt>
                                </c:forEach>
                            </div>
                        </div>
                        <%-- 满返活动条件框--%>
                        <div class="form-group row " id="fullReturnId" style="display:none;">
                            <div  class="col-sm-3 col-form-label text-right">
                                <label>满返活动</label>
                                <%--<input type="button" onclick="addMarketActivity.addFullReturn()" value="[+]" />--%>
                            </div>
                            <div id="fullReturnInputs">
                                <c:forEach items="${marketActivityRecords}" var="record">
                                    <span>订单金额满<input type="text" name="orderAmount_mf_0" id="orderAmount_mf_0" value="${record.orderAmount}">奖励
                                    <select  name="tickettypeId_mf_0" id="tickettypeId_mf_0" class="form-control" placeholder="选择卡券" lay-search="">
                                       <option value="" selected="selected">请选择</option>
                                       <c:forEach items="${ticketInfos}" var="info">
                                           <option value="${info.ticketTypeId}" <c:if test="${record.ticketTypeId == info.ticketTypeId}" >selected</c:if>>
                                                   ${info.ticketName}|${info.discountTypeName}|${info.userTypeName}|${info.discountDesc}
                                           </option>
                                       </c:forEach>
                                    </select>
                                    </span>
                                </c:forEach>
                            </div>
                        </div>
                        <%-- 拉新活动条件框--%>
                        <div class="form-group row " id="pullNewId" style="display:none;">
                            <div  class="col-sm-3 col-form-label text-right">
                                <label>拉新活动</label>
                            </div>
                            <div id="pullNewInputs" >
                                <c:forEach items="${marketActivityRecords}" var="record">
                                    <c:if test="${record.rewardType == 0}">
                                        <span>拉新人数满<input type="text" name="pullNew_lx_0"  value="${record.pullNew}">奖励<input type="text" name="awardAmount_lx_0" id="awardAmount_lx_0" value="${record.awardAmount}">(元)</span></inpt>
                                    </c:if>
                                    <div></div>
                                    <c:if test="${record.rewardType == 1}">
                                         <span>拉新人数满
                                            <input type="text" name="pullNew_lx_0" value="${record.pullNew}">奖励
                                            <select  name="ticketTypeId_lx_0"  id="ticketTypeId_lx_0" class="form-control" placeholder="选择卡券" lay-search="">
                                                       <option value="" selected="selected">请选择</option>
                                                       <c:forEach items="${ticketInfos}" var="info">
                                                           <option value="${info.ticketTypeId}" <c:if test="${record.ticketTypeId == info.ticketTypeId}" >selected</c:if>>
                                                                   ${info.ticketName}|${info.discountTypeName}|${info.userTypeName}|${info.discountDesc}
                                                           </option>
                                                       </c:forEach>
                                                   </select>
                                            </span></inpt>
                                    </c:if>
                                </c:forEach>


                            </div>
                        </div>
                        <div class="form-group row" id="fullConditionId">
                            <label class="col-sm-3 col-form-label text-right">满足条件</label>
                            <div class="col-sm-2">
                                <input type="radio"  name="sumCondition" value="0"  <c:if test="${marketActivity.sumCondition eq '0'}">checked="checked"</c:if>>活动期间内满足
                            </div>
                            <div class="col-sm-1">
                                <input type="radio"  name="sumCondition" value="1" <c:if test="${marketActivity.sumCondition eq '1'}">checked="checked"</c:if>>一次性满足
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">开始时间</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="beginTime" name="beginTime"  value="<fmt:formatDate value="${marketActivity.beginTime}" pattern="yyyy-MM-dd" />" readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">结束时间</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="endTime" name="endTime" value="<fmt:formatDate value="${marketActivity.endTime}" pattern="yyyy-MM-dd" />"  readonly>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动图片</label>
                            <div class="col-sm-8">
                                <div id="">
                                    <img id="stationImg1" src="${marketActivity.activityImg}"
                                         style="position: relative" width="155px" height="120px">
                                </div>
                                <span>图片尺寸建议为：<span class="text-danger">98px*75px</span></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动位置</label>
                            <div class="col-sm-3">
                                <select class="form-control" name="activityIndex" id="activityIndex" >
                                    <option value="0"  <c:if test="${marketActivity.activityIndex eq '0'}"> checked="checked"</c:if>>首页</option>
                                    <option value="1"  <c:if test="${marketActivity.activityIndex eq '1'}"> checked="checked"</c:if>>活动中心</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动链接</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" id="activityLink" name="activityLink" value="${marketActivity.activityLink}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-3 col-form-label text-right">活动内容：</label>

                            <div class="col-sm-6 layui-input-inline" >
                                <textarea class="layui-textarea"  id="content" placeholder="请输入内容"  style="display: none"  name="content" autocomplete="off">${marketActivity.content}</textarea>
                            </div>
                        </div>
                        <div class="form-group">


                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .seach-box {
        height: 200px;
        border: 1px solid #eee;
        padding-left: 15px;
        padding-top: 10px;
        margin-top: 10px;
    }

    .connectivity_inner_seach, .connectivity_seach {
        padding-left: 0;
        padding-top: 0px;
        overflow: auto;
    }

    .seach-box ul {
        height: 100%;
        width: 100%;
        overflow: auto;
    }

    .seach-box ul li {
        padding-top: 3px;
        display: flex;
    }

    .layui-form-checkbox i {
        height: 30px;
    }

    .layui-checkbox-disbaled span {
        background-color: #5FB878 !important;
    }

    .hide {
        display: none !important;
    }
</style>
<script type="text/javascript">
    $(window).on('load', function () {
        $('.selectpicker').selectpicker({
            'selectedText': 'cat'
        });

        // $('.selectpicker').selectpicker('hide');
    });

    layui.use(['layedit','form'], function(){
        var layedit = layui.layedit
            ,$ = layui.jquery
            ,form = layui.form;
        //设置图片上传
        layedit.set({
            uploadImage: {
                url: jsctx + '/tenantNotice/uploadFile' //图片上传方法的接口url
                ,type: 'post' //默认post
            }
        });
        //构建富文本编辑器，构建方法一定要写在set方法下边
        var index = layedit.build('content');

        //校验表单的方法，并将富文本编辑器中的内容同步到文本域中
        form.verify({
            content : function(value) {
                return layedit.sync(index); //同步语句
            }
        });

        //保存表单内容提交的方法
        $('#fileNotifySubmit').on('click', function(){

            var active = {
                //获取纯文本内容： 111
                //如果要获取样式，将text替换成 content: <p>111</p>
                //如果要获取选中的文字，将text替换成selected：111
                text: function(){
                    //获取富文本编辑器值的语句并赋值到文本域中
                    document.getElementById("content").innerText = layedit
                        .getContent(index);
                }
            };
            contenthtml=layedit.getContent(index);
            addMarketActivity.save();
        });
    });
    //重新加载的方法
    layui.use(['table', 'laydate','element'], function () {
        var table = layui.table, form = layui.form, $ = layui.jquery;
    });

    $("#file1").change(function () {
        var objUrl = getObjectURL(this.files[0]);//获取文件信息
        var fileSize = $(this)[0].files[0].size
        if (objUrl) {
            if (fileSize > (2 * 1024 * 1024)) {
                layer.msg('请上传小于2M的图片！');
                $(this).val("");
                return
            }
            $("#stationImg1").attr("src", objUrl);
        }
    });

    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    function showUser(){
        layer.open({
            btn: ['确定', '关闭'],
            type: 2,
            title: '选择用户',
            shadeClose: true,
            shade: 0.8,
            area: ['1280px', '800px'],
            content: '${ctx}/member/index',//iframe弹层的页面地址
            yes: function (index, layero) {
                debugger
                var body = layer.getChildFrame("body",index);
                var iframeWin = window[layero.find('iframe')[0]['name']]
                var rows  = iframeWin.$("#exampleTable").bootstrapTable('getSelections');
                if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
                    return;
                } else {
                    var ids = new Array();// 声明一个数组
                    $(rows).each(function() {// 通过获得别选中的来进行遍历
                        ids.push(this.memberId);// cid为获得到的整条数据中的一列
                    });
                    // $('#activityName').val(ids);
                    //layer.alert("get:"+ids);
                    $("#userIds").val(ids);
                }

                layer.close(index);
            },btn2: function(index, layero){
                layer.close(index);
            }
        });
    };

    function showTicket(){
        layer.open({
            btn: ['确定'],
            type: 2,
            title: '选择卡券',
            shadeClose: true,
            shade: 0.8,
            area: ['1280px', '800px'],
            content: '${ctx}/tenantTicketType/index',//iframe弹层的页面地址
            yes: function (index, layero) {
                layer.close(index);
            }
        });
    };

    function changeType(_val) {
        //debugger
        switch (_val) {
            case '1' :
                console.log("切换充值活动拉11111");
                $("#chargeId").show();
                $("#fullRedutionId").hide();
                $("#fullReturnId").hide();
                $("#pullNewId").hide();
                $("#fullConditionId").show();
                break;
            case '3' :
                $("#fullRedutionId").show();
                $("#chargeId").hide();
                $("#fullReturnId").hide();
                $("#pullNewId").hide();
                $("#fullConditionId").hide();
                console.log("切换满减活动拉33333");
                break;
            case '4' :
                $("#fullReturnId").show();
                $("#chargeId").hide();
                $("#fullRedutionId").hide();
                $("#pullNewId").hide();
                $("#fullConditionId").show();
                console.log("切换满返活动拉44444");
                break;
            case '5' :
                $("#pullNewId").show();
                $("#fullRedutionId").hide();
                $("#fullReturnId").hide();
                $("#chargeId").hide();
                $("#fullConditionId").hide();
                console.log("切换拉新活动拉55555");
                break;
        }
    }

    function scopeChange1(_val){
        if (_val=='1'){
            $("#stationBoxId").show();
        }else{
            $("#stationBoxId").hide();
        }
    }

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        /*  var bizStartTime = laydate.render({
              elem: '#bizStartTime',
              type: 'time',
              format: 'HH:mm:ss',
              trigger: 'click'
          });

          var bizEndTime = laydate.render({
              elem: '#bizEndTime',
              type: 'time',
              format: 'HH:mm:ss',
              trigger: 'click'
          });*/

        var beginTime = laydate.render({
            position: 'fixed',
            elem: '#beginTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            trigger: 'click',
            showBottom:false
        });
        var endTime = laydate.render({
            position: 'fixed',
            elem: '#endTime',
            type: 'date',
            format: 'yyyy-MM-dd',
            trigger: 'click',
            showBottom:false
        });
    });
    $(function () {
        //判断是否是部分充电站
        var activityScopes = '${marketActivity.activityScope}';
        if(activityScopes == '1'){
            $("#stationBoxId").show();
        }
        //判断活动类型
        var activityType= '${marketActivity.activityType}';
        changeType(activityType);
        //判断活动是否是多条
        <%--var size = '${sizes}';--%>
        <%--if(size>1){--%>
        <%--    if(activityType == '1'){--%>
        <%--        addMarketActivity.addCharge();--%>
        <%--    }else if(activityType == '3'){--%>
        <%--        addMarketActivity.addFullRedution();--%>
        <%--    }else if(activityType == '4'){--%>
        <%--        addMarketActivity.addFullReturn();--%>
        <%--    }else if(activityType == '5'){--%>
        <%--        addMarketActivity.addPullNew()--%>
        <%--    }--%>
        <%--}--%>
        <%--var list = eval('${marketActivityRecords}');--%>
        <%--console.info(list);--%>
        <%--$.each(list, function (key, value) {--%>
        <%--    value.rewardType --%>
        <%--});--%>

    });

    addMarketActivity.init();
</script>
</body>
</html>
